<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ include file="../common/header.jsp" %>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${AK}"></script>
<style>
    <%--百度地图取消显示logo--%>
    .BMap_cpyCtrl {
        display: none;
    }

    .anchorBL {
        display: none;
    }

    <%--信息样式--%>
    .kv-item label {
        width: 110px
    }

    .kv-item-content {
        line-height: 30px;
        border-bottom: 1px solid rgba(128, 128, 128, 0.6);
        max-width: calc(90%)
    }

    .buttons .layui-btn {
        margin-bottom: 25px
    }

    .subfiled h2 {
        cursor: pointer
    }
</style>

<div id="saper-container">
    <div id="saper-bd">
        <div class="subfiled clearfix">
            <h2>${titleName}</h2>
        </div>
        <div class="subfiled-content">
            <div class="saper-form">
                <div class="kv-item clearfix">
                    <label>事件编号：</label>
                    <div class="kv-item-content">${reportFormat.ctReport.taskId}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>事件名：</label>
                    <div class="kv-item-content">${reportFormat.ctReport.title}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>事件分类：</label>
                    <div class="kv-item-content">
                        ${reportFormat.typeBigName}
                        <c:if test="${reportFormat.typeSmallName != null}">
                            &nbsp;&nbsp;${reportFormat.typeSmallName}
                        </c:if>
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>事件描述：</label>
                    <div class="kv-item-content">
                        ${reportFormat.ctReport.content}
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>事件地点：</label>
                    <div class="kv-item-content">${reportFormat.ctReport.province}&nbsp;${reportFormat.ctReport.city}&nbsp;${reportFormat.ctReport.county}
                        &nbsp;${reportFormat.townName}&nbsp;${reportFormat.villageName}&nbsp;${reportFormat.ctReport.address}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>gis信息：</label>
                    <div class="kv-item-content" style="border: none">
                        <div id="mapContainer" gis-lng="${reportFormat.ctReport.lng}"
                             gis-lat="${reportFormat.ctReport.lat}"
                             style="width: 600px;height: 400px;margin-top: 10px;"></div>
                        <div id="searchResultPanel"
                             style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>上报类别：</label>
                    <div class="kv-item-content">${reportFormat.categoryName}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>上报人：</label>
                    <div class="kv-item-content">${reportFormat.reportName}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>上报时间：</label>
                    <div class="kv-item-content">${reportFormat.createTimeName}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>受理员：</label>
                    <div class="kv-item-content">${reportFormat.handleManName}</div>
                    <label>受理时间：</label>
                    <div class="kv-item-content">
                        ${taskTime.agreeTime}
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>处置部门：</label>
                    <div class="kv-item-content">${reportFormat.branchName}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>督办次数：</label>
                    <div class="kv-item-content">${reportFormat.doBanCount == null ? 0 : reportFormat.doBanCount}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>更新时间：</label>
                    <div class="kv-item-content">${reportFormat.ctReport.updateTime}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>当前状态：</label>
                    <div class="kv-item-content">${reportFormat.scheduleName}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>上报文件：</label>

                    <div class="kv-item-content" id="fileList">





                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>回传文件：</label>
                    <div class="kv-item-content" id="backList">





                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>处理人：</label>
                    <div class="kv-item-content">${reportFormat.checkManName}</div>
                    <label>完成时间：</label>
                    <div class="kv-item-content">
                        ${taskTime.workTime}
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>审核者：</label>
                    <div class="kv-item-content">
                        ${reportFormat.hechaName}
                    </div>
                    <label>审核时间：</label>
                    <div class="kv-item-content">
                        ${taskTime.checkTime}
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>结案者：</label>
                    <div class="kv-item-content">
                        ${reportFormat.finishName}
                    </div>
                    <label>结案时间：</label>
                    <div class="kv-item-content">
                        ${taskTime.finishTime}
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>反馈评论：</label>
                    <div class="kv-item-content">
                        ${reportFormat.ctReport.comment}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mengceng">
        <div class="show-bigImg">
            <img src="" alt="" id="bigImg" onclick="closeImg(this)">
        </div>
    </div>

    <div id="saper-ft">
        <button></button>
    </div>
</div>
<%@ include file="../common/footer.jsp" %>

<script type="text/javascript">

    //创建地图
    var map = new BMap.Map("mapContainer", {
        minZoom: 11
    });

    // 创建地图实例
    var lng = $("#mapContainer").attr("gis-lng");
    var lat = $("#mapContainer").attr("gis-lat");
    var point = new BMap.Point(lng, lat);   // 创建点坐标
    map.centerAndZoom(point, 18);                       // 设置缩放度
    map.clearOverlays();                                // 清除地图上所有覆盖物
    map.addOverlay(new BMap.Marker(point));             // 添加标注
    map.enableScrollWheelZoom();                    //启用滚轮放大缩小

    var taskId =${taskId};

    $.post("/ajax/colligate/fileList",{
        taskId:taskId
    },function (res) {
        if(res.code==0){
            for(var i=0; i<res.data.length;i++){
                var upFileName = res.data[i].filePath;
                var index1=upFileName.lastIndexOf(".");
                var index2=upFileName.length;
                var suffix=upFileName.substring(index1+1,index2);//后缀名
                //通过后缀名 判断文件  如果后缀名是jpg , png ,添加im标签  如果其他的 添加对应的标签
                if(suffix=="png" || suffix=="jpg"){
                    $("#fileList").append('<div><img style="width: 80px;height: 60px;" onClick="bigImg(this)" src="'+ upFileName +'" /></div>');
                }else if(suffix=="gif" || suffix=="mp4"){
                    $("#fileList").append(' <div>\n' +
                        '                            <video width="320" height="240" controls loop>\n' +
                        '                                <source src="'+ upFileName +'" type="video/mp4">\n' +
                        '                            </video>\n' +
                        '                        </div>');

                }else if(suffix=="pdf" || suffix=="doc" || suffix=="docx"){
                    $("#fileList").append('    <div>\n' +
                        '                            <a href="'+ upFileName +'">\n' +
                        '                                <button class="layui-btn  layui-btn-warm">下载上报文档 \n' +
                        '\n' +
                        '                                </button>\n' +
                        '                            </a>\n' +
                        '                        </div>')
                }


            }
        }
    })

    //回传文件列表
    $.post("/ajax/colligate/fileList",{
        taskId:taskId,
        type:2
    },function (res) {
        if(res.code==0){
            for(var i=0; i<res.data.length;i++){
                var upFileName = res.data[i].filePath;
                var index1=upFileName.lastIndexOf(".");
                var index2=upFileName.length;
                var suffix=upFileName.substring(index1+1,index2);//后缀名
                //通过后缀名 判断文件  如果后缀名是jpg , png ,添加im标签  如果其他的 添加对应的标签
                if(suffix=="png" || suffix=="jpg"){
                    $("#backList").append('<div><img style="width: 80px;height: 60px;" onClick="bigImg(this)" src="'+ upFileName +'" /></div>');
                }else if(suffix=="gif" || suffix=="mp4"){
                    $("#backList").append(' <div>\n' +
                        '                            <video width="320" height="240" controls loop>\n' +
                        '                                <source src="'+ upFileName +'" type="video/mp4">\n' +
                        '                            </video>\n' +
                        '                        </div>');

                }else if(suffix=="pdf" || suffix=="doc" || suffix=="docx"){
                    $("#backList").append('    <div>\n' +
                        '                            <a href="'+ upFileName +'">\n' +
                        '                                <button class="layui-btn  layui-btn-warm">下载上报文档 \n' +
                        '\n' +
                        '                                </button>\n' +
                        '                            </a>\n' +
                        '                        </div>')
                }


            }
        }
    })

</script>


<style>
    .show-bigImg{
        width: 1200/@rem;
        height: auto;
        margin: auto;
        position: fixed;
        top: 50%;
        left: 50%;
    }
    .show-bigImg img{
        max-width: 60%;
        max-height: 800/@rem;
        margin-top: 13%;
        margin-left: 32%;
    }
    .mengceng{
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color: rgba(0,0,0,0.7);
        display: none;
    }
</style>
<script>
    function bigImg(obj) {
        var image = new Image(); //创建一个image对象
        var path = obj.src;
        image.src=path;   //新创建的image添加src
        var width = image.width;  // 获取原始图片的宽
        var hight = image.height; // 获取原始图片高
        $("#bigImg").attr('src',path);
        $(".show-bigImg").css({"margin-top":-hight/2,"margin-left":-width/2});// 居中；css中使用了fixed定位top：50%；left：50%；
        $(".mengceng").css("display","block");
        // if (width>1200) {
        //     $(".show-bigImg").css({"margin-left":-1200/2});
        // }
        // if (hight>800) {
        //     $(".show-bigImg").css({"margin-top":-800/2});
        // }
    }
    // 点击放大图片关闭
    function closeImg(obj) {
        $("#bigImg").attr('src',"");
        $(".mengceng").css("display","none");
    }
</script>
